<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>jQuery.Sugar</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.sugar.js"></script>
	<style type="text/css">
		html,body{
			overflow:hidden;
			background:black;
		}
		#obj{
			font-size: 40px;
			font-family:Verdana;
			text-align:center;
			
			padding:15px 0 0 0;
			width:500px;
			height:220px;
			
			background:yellow;
			border:3px red solid;
			color:red;
		}
		.clickable{
			cursor:pointer;
		}
	</style>
</head>
<body>
	<button id="load">Load</button>
	<div id="obj">&nbsp;</div>	
	
	<script type="text/javascript">
		$('#load').click(function(){
			$('#obj')
				.load('data/data.html')
				.then()
					.find('h1')
						.hide().fadeIn(1500)
						.click(function(){
							$(this).text('Boo!').removeClass('clickable');
						})
				.meanwhile()
				.html('<h1>Loading...</h1>');
		});
	</script>
</body>
</html>
